<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>lifetimes</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <div id="root">
        <!-- {{$options.selfx}} -->
        {{title}}
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                title: 'hello'
            },

            // 通过vm.$options去读取
            selfx: 0,
            Selfoo: () => {
                console.log(0);
            },

            //    可以访问this 但是不能访问数据
            // 使用场景：
            // 可以做一些跟当前状态无关的，给实例绑一个静态的属性
            beforeCreate() {
                // console.log('beforeCreated');
                // console.log(this);   //yes
                // console.log(this.title);  //no
                // console.log(document.querySelector('#root'));   //maybe, 模板还没哟渲染
                // 应用场景：给实例自定义内容
                // this.x = 100  //yes
            },

            // 可以修改data里的值
            created() {
                // console.log(this); // yes
                // console.log(this.title); //yes
                // console.log(document.querySelector('#root')); //maybe
                // 应用场景：修改data的值
                // this.title= 'world'
            },


            beforeMount() {
                // console.log(this); // yes
                // console.log(this.title); //yes
                // console.log(document.querySelector('#root')); //maybe
                // 应用场景：修改data的值
                // this.title= 'world'
            },


            mounted() {
                // console.log(this); // yes
                // console.log(this.title); //yes
                // console.log(document.querySelector('#root'));//yes
                // 使用场景：一般在第一次页面渲染完毕后的工作都在这里完成
                setTimeout(() =>{
                    this.title = 'world'
                    // this.$destroy()
                },5000)
                // ajax 放到这里
            },

            beforeUpdate() {
                // console.log(document.querySelector('#root'));
            },

            updated() {
                // console.log(document.querySelector('#root'));
                // setInterval(() => {
                //     this.title = new Date().getTime()
                // }, 1000);
            },

            beforeDestroy() {
                // console.log('beforeDestroy.');
            },

            destroyed() {
                // console.log('destroyed.');
            },
            //    mounted () {
            //        console.log(this.$options.selfx);
            //    },
        })
    </script>
</body>

</html>